import React, { useState, useRef, useMemo } from 'react';
import ReactDOM from 'react-dom';
import { Drawer, Card, Alert, Tooltip, Modal, message, Popconfirm, Tag } from 'antd';
import AutoTable from '@/components/AutoTable';
import { stopsettle, companydetail, company } from '@/services/business';
import { connect, history } from 'umi';
import * as columnsconfig from './columnsconfig';
import moment from 'moment';
import { getFetch } from '@/utils/doFetch';
// type 类型有 table treeselect upload inputnumber datepicker daterange radio select textarea autoinput editor password input
function mapTree(org) {
  const haveChildren = Array.isArray(org.childrens) && org.childrens.length > 0;
  return {
    //分别将我们查询出来的值做出改变他的key
    title: org.name,
    label: org.name,
    value: org.id,
    //判断它是否存在子集，若果存在就进行再次进行遍历操作，知道不存在子集便对其他的元素进行操作
    children: haveChildren ? org.childrens.map((i) => mapTree(i)) : [],
  };
}
function Salary(props) {
  const [iftype, ciftype] = useState({
      visible: false,
    }),
    [curkey, setcur] = useState('1'),
    [time, ctime] = useState({
      start_time: moment().add('month', -6).format('YYYY-MM-DD'),
      end_time: moment().format('YYYY-MM-DD'),
    });

  let actionRef = useRef(),
    ChildRef = null,
    actionRefs = useRef(),
    ChildRefs = null;

  function reload() {
    actionRef?.current?.reload();
    actionRefs?.current?.reload();
    ChildRef?.onRefresh();
    ChildRefs?.onRefresh();
  }

  const columns = [
      {
        title: '员工名称',
        dataIndex: 'user_name',
        key: 'user_name',
      },
      {
        title: '部门职位',
        dataIndex: 'department_name',
        key: 'department_id',
        valueType: 'treeSelect',
        fieldProps: {
          treeDefaultExpandAll: true,
        },
        render: (_, record) => {
          return record.department_name
            ? record?.department_name?.split(",").map((it, i) => (
                <Tag color="blue" key={i}>
                  {it}
                </Tag>
              ))
            : '-';
        },
        request: async () => {
          let res = await getFetch({ url: '/wbn-api/department', params: {} });
          let result = res?.data?.map((it) => mapTree(it)) ?? [];
          return result;
        },
      },
      {
        title: '月份',
        dataIndex: 'yearmonth',
        key: 'yearmonth',
        valueType: 'dateMonth',
        initialValue: moment().format('YYYY-MM'),
        render: (_, row) => {
          return <span>{row.year + '-' + (row.month < 10 ? '0' + row.month : row.month)}</span>;
        },
      },
      {
        title: '总薪水',
        dataIndex: 'amount',
        key: 'amount',
        search: false,
      },
      {
        title: '新开户数',
        dataIndex: 'open_account_num',
        key: 'open_account_num',
        search: false,
        render: (_, row) => {
          return (
            <a
              onClick={() => {
                ciftype({
                  ...iftype,
                  visible: true,
                  title: `${row.user_name} ${
                    row.year + '-' + (row.month < 10 ? '0' + row.month : row.month)
                  } 开户列表`,
                  type: 'open_account_num',
                  id: row.id,
                });
              }}
            >
              {row.open_account_num}
            </a>
          );
        },
      },
      {
        title: <span title="新开户收单金额">新开户收单金额</span>,
        dataIndex: 'open_account_amount',
        key: 'open_account_amount',
        search: false,
      },
      {
        title: '促单开户数量',
        dataIndex: 'open_account_promoter_num',
        key: 'open_account_promoter_num',
        search: false,
        render: (_, row) => {
          return (
            <a
              onClick={() => {
                ciftype({
                  ...iftype,
                  visible: true,
                  title: `${row.user_name} ${
                    row.year + '-' + (row.month < 10 ? '0' + row.month : row.month)
                  } 促单开户列表`,
                  type: 'open_account_promoter_num',
                  id: row.id,
                });
              }}
            >
              {row.open_account_promoter_num}
            </a>
          );
        },
      },
      {
        title: <span title="促单开户奖励">促单开户奖励</span>,
        dataIndex: 'open_account_promoter_reward',
        key: 'open_account_promoter_reward',
        search: false,
      },
      {
        title: <span title="续单收单总金额">续单收单总金额</span>,
        dataIndex: 'renewal_order_amount',
        key: 'renewal_order_amount',
        search: false,
        render: (_, row) => {
          return (
            <a
              onClick={() => {
                ciftype({
                  ...iftype,
                  visible: true,
                  title: `${row.user_name} ${
                    row.year + '-' + (row.month < 10 ? '0' + row.month : row.month)
                  } 续单列表`,
                  type: 'renewal_order_amount',
                  id: row.id,
                });
              }}
            >
              {row.renewal_order_amount}
            </a>
          );
        },
      },
      {
        title: <span title="开户提成金额">开户提成金额</span>,
        dataIndex: 'open_account_take',
        key: 'open_account_take',
        search: false,
      },
      {
        title: <span title="收单提成金额">收单提成金额</span>,
        dataIndex: 'payment_take',
        key: 'payment_take',
        search: false,
      },
      {
        title: <span title="浮动底薪金额">浮动底薪金额</span>,
        dataIndex: 'float_take',
        key: 'float_take',
        search: false,
      },
      {
        title: '代账客户数',
        dataIndex: 'customer_number',
        key: 'customer_number',
        search: false,
      },
      {
        title: '记账提成',
        dataIndex: 'voucher_account_take',
        key: 'voucher_account_take',
        search: false,
      },
      {
        title: '复核提成',
        dataIndex: 'voucher_review_take',
        key: 'voucher_review_take',
        search: false,
      },
      {
        title: '其他业务(接单)',
        dataIndex: 'other_receiver_reward',
        key: 'other_receiver_reward',
        search: false,
        render: (_, row) => {
          return (
            <a
              onClick={() => {
                ciftype({
                  ...iftype,
                  visible: true,
                  title: `${row.user_name} ${
                    row.year + '-' + (row.month < 10 ? '0' + row.month : row.month)
                  } 其他业务(接单)列表`,
                  type: 'other_receiver_reward',
                  id: row.id,
                });
              }}
            >
              {row.other_receiver_reward}
            </a>
          );
        },
      },
      {
        title: '其他业务(协同)',
        dataIndex: 'other_coordination_reward',
        key: 'other_coordination_reward',
        search: false,
        render: (_, row) => {
          return (
            <a
              onClick={() => {
                ciftype({
                  ...iftype,
                  visible: true,
                  title: `${row.user_name} ${
                    row.year + '-' + (row.month < 10 ? '0' + row.month : row.month)
                  } 其他业务(协同)列表`,
                  type: 'other_coordination_reward',
                  id: row.id,
                });
              }}
            >
              {row.other_coordination_reward}
            </a>
          );
        },
      },
      {
        title: <span title="其他业务(辅助协同)">其他业务(辅助协同)</span>,
        dataIndex: 'other_auxiliary_coordination_reward',
        key: 'other_auxiliary_coordination_reward',
        search: false,
        render: (_, row) => {
          return (
            <a
              onClick={() => {
                ciftype({
                  ...iftype,
                  visible: true,
                  title: `${row.user_name} ${
                    row.year + '-' + (row.month < 10 ? '0' + row.month : row.month)
                  } 其他业务(辅助协同)列表`,
                  type: 'other_auxiliary_coordination_reward',
                  id: row.id,
                });
              }}
            >
              {row.other_auxiliary_coordination_reward}
            </a>
          );
        },
      },
    ],
    columnes = [
      {
        title: '员工名称',
        dataIndex: 'user_name',
        key: 'user_name',
      },
      {
        title: '部门职位',
        dataIndex: 'department_name',
        key: 'department_id',
        valueType: 'treeSelect',
        fieldProps: {
          treeDefaultExpandAll: true,
        },
        render: (_, record) => {
          return record.department_name
          ? record?.department_name?.split(",").map((it, i) => (
              <Tag color="blue" key={i}>
                {it}
              </Tag>
            ))
          : '-';
        },
        request: async () => {
          let res = await getFetch({ url: '/wbn-api/department', params: {} });
          let result = res?.data?.map((it) => mapTree(it)) ?? [];
          return result;
        },
      },
      {
        title: '代账客户数',
        dataIndex: 'customer_number',
        key: 'customer_number',
        search: false,
      },
      {
        title: '开始时间',
        dataIndex: 'start_time',
        key: 'start_time',
        valueType: 'date',
        initialValue: time.start_time,
      },
      {
        title: '结束时间',
        dataIndex: 'end_time',
        key: 'end_time',
        valueType: 'date',
        initialValue: time.end_time,
      },
      {
        title: '总薪水',
        dataIndex: 'amount',
        key: 'amount',
        search: false,
      },
      {
        title: '新开户数',
        dataIndex: 'open_account_num',
        key: 'open_account_num',
        search: false,
        render: (_, row) => {
          return (
            <a
              onClick={() => {
                ciftype({
                  ...iftype,
                  visible: true,
                  title: `${row.user_name}  开户列表`,
                  type: 'open_account_num',
                  id: row.id,
                  is_record: true,
                });
              }}
            >
              {row.open_account_num}
            </a>
          );
        },
      },
      {
        title: '新开户收单金额',
        dataIndex: 'open_account_amount',
        key: 'open_account_amount',
        search: false,
      },
      {
        title: '促单开户数量',
        dataIndex: 'open_account_promoter_num',
        key: 'open_account_promoter_num',
        search: false,
        render: (_, row) => {
          return (
            <a
              onClick={() => {
                ciftype({
                  ...iftype,
                  visible: true,
                  title: `${row.user_name}  促单开户列表`,
                  type: 'open_account_promoter_num',
                  id: row.id,
                  is_record: true,
                });
              }}
            >
              {row.open_account_promoter_num}
            </a>
          );
        },
      },
      {
        title: '促单开户奖励',
        dataIndex: 'open_account_promoter_reward',
        key: 'open_account_promoter_reward',
        search: false,
      },
      {
        title: '续单收单总金额',
        dataIndex: 'renewal_order_amount',
        key: 'renewal_order_amount',
        search: false,
        render: (_, row) => {
          return (
            <a
              onClick={() => {
                ciftype({
                  ...iftype,
                  visible: true,
                  title: `${row.user_name}  续单列表`,
                  type: 'renewal_order_amount',
                  id: row.id,
                  is_record: true,
                });
              }}
            >
              {row.renewal_order_amount}
            </a>
          );
        },
      },
      {
        title: '开户提成金额',
        dataIndex: 'open_account_take',
        key: 'open_account_take',
        search: false,
      },
      {
        title: '收单提成金额',
        dataIndex: 'payment_take',
        key: 'payment_take',
        search: false,
      },
      {
        title: '浮动底薪金额',
        dataIndex: 'float_take',
        key: 'float_take',
        search: false,
      },
      {
        title: '其他业务(接单)',
        dataIndex: 'other_receiver_reward',
        key: 'other_receiver_reward',
        search: false,
        render: (_, row) => {
          return (
            <a
              onClick={() => {
                ciftype({
                  ...iftype,
                  visible: true,
                  title: `${row.user_name}  其他业务(接单)列表`,
                  type: 'other_receiver_reward',
                  id: row.id,
                  is_record: true,
                });
              }}
            >
              {row.other_receiver_reward}
            </a>
          );
        },
      },
      {
        title: '其他业务(协同)',
        dataIndex: 'other_coordination_reward',
        key: 'other_coordination_reward',
        search: false,
        render: (_, row) => {
          return (
            <a
              onClick={() => {
                ciftype({
                  ...iftype,
                  visible: true,
                  title: `${row.user_name}  其他业务(协同)列表`,
                  type: 'other_coordination_reward',
                  id: row.id,
                  is_record: true,
                });
              }}
            >
              {row.other_coordination_reward}
            </a>
          );
        },
      },
      {
        title: '其他业务(辅助协同)',
        dataIndex: 'other_auxiliary_coordination_reward',
        key: 'other_auxiliary_coordination_reward',
        search: false,
        render: (_, row) => {
          return (
            <a
              onClick={() => {
                ciftype({
                  ...iftype,
                  visible: true,
                  title: `${row.user_name}  其他业务(辅助协同)列表`,
                  type: 'other_auxiliary_coordination_reward',
                  id: row.id,
                  is_record: true,
                });
              }}
            >
              {row.other_auxiliary_coordination_reward}
            </a>
          );
        },
      },
    ];

  let tableprops = useMemo(() => {
    return {
      path: columnsconfig.pathobj[iftype.type],
      columns: columnsconfig[iftype.type],
      extraparams: {
        is_record: iftype.is_record,
        [iftype.is_record ? 'user_id' : 'id']: iftype.id,
        start_time: time.start_time,
        end_time: time.end_time,
      },
    };
  }, [iftype]);

  return (
    <div className="pgcontainer">
      <Card
        title={props.route.name}
        tabList={[
          {
            key: '1',
            tab: '当月',
          },
          {
            key: '2',
            tab: '历史',
          },
        ]}
        onTabChange={(key) => {
          setcur(key);
        }}
      >
        {curkey == '1' && (
          <AutoTable
            withCard={false}
            bordered={false}
            columns={columns}
            actionRef={actionRef}
            onRef={(node) => (ChildRef = node)}
            path={'/wbn-api/salary'}
          ></AutoTable>
        )}
        {curkey == '2' && (
          <AutoTable
            withCard={false}
            bordered={false}
            columns={columnes}
            actionRef={actionRefs}
            onRef={(node) => (ChildRefs = node)}
            onSearchChange={(values) => {
              ctime({
                start_time: values.start_time,
                end_time: values.end_time,
              });
            }}
            path={'/wbn-api/salary/salary_record'}
          ></AutoTable>
        )}
      </Card>

      <Drawer
        visible={iftype.visible}
        title={iftype.title}
        placement={'top'}
        closable
        onClose={() => {
          ciftype({
            ...iftype,
            visible: false,
          });
        }}
        height="60vh"
      >
        <AutoTable {...tableprops} withCard={false} pagination="false"></AutoTable>
      </Drawer>
    </div>
  );
}

export default connect(({ business, loading }) => ({
  business,
  loading,
}))(Salary);
